const path = require('path');
const webpack = require('webpack');

module.exports = {
    mode: 'development',
    // entry: './build/index.js',
    entry: './src/index.ts',    // 一步到位，无需手动tsc，也不会生成 index.js
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",    // 使用 ts-loader
                exclude: /node_modules/,
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']  // tsx 是使用ts的react格式，若要使用还需在tsconfig中启用jsx
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    // webpack-dev-server
    devServer: {
        static: {  // 所有不是由webpack提供的内容从此处查找，因此可以访问 index.html
            directory: path.join(__dirname, '/'),
            watch: true
        },
        port: '9527',
        liveReload: true,
        watchFiles: ['./*.html', './style/*', './src/*'],  // 视图监控静态文件更新，index.html不管用，CSS管用。
        hot: true   // 启用热更新
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin({})  // HMR 插件
    ]

}